<template>
    <div class="contact_container">
        <div class="banner">
            <img src="../../assets/img/contact.png" alt="" class="contact">
        </div>
        <div class="form_box">
            <h2 class="title">联系我们</h2>
            <el-form :model="ruleForm" ref="ruleForm" label-width="80px" label-position="right" class="ruleform">
                <el-form-item label="我需要" prop="choice" :style="labelstyle">
                    <el-select v-model="ruleForm.choice" placeholder="请选择" style="width:100%;">
                        <el-option label="业主租赁合作" value="1" style="padding-left:15px;"></el-option>
                        <el-option label="广告合作" value="2" style="padding-left:15px;"></el-option>
                        <el-option label="其他合作" value="3" style="padding-left:15px;"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="姓名" prop="userName" :style="labelstyle">
                    <el-input v-model="ruleForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="mobile" :style="labelstyle">
                    <el-input v-model="ruleForm.mobile"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="content" :style="labelstyle">
                    <el-input type="textarea" v-model="ruleForm.content"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm" class="btn_commit">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import { contactus } from "@/api/help"
export default {
    metaInfo: {
        title: "联系我们",
        meta: [
            {
                name: "keywords",
                content: "办公,租赁,房源,联系我们,房屋出租,办公空间出租"
            },
            {
                name: "description",
                content: "房大办公联系我们"
            }
        ]
    },
    data() {
        return {
            ruleForm: {
                choice: '',
                userName: '',
                mobile: '',
                content: ''
            },
        }
    },
    created(){
        this.$root.goIndex=3
    },
    methods:{
        submitForm() {
            if(!window.localStorage.getItem('token')){
                this.$message.error('请先登录！');
                return
            };
            if(this.ruleForm.userName == ''){
                this.$message.error('请输入姓名！');
                return
            };
            var tellreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
            if(!tellreg.test(this.ruleForm.mobile)){
                this.$message.error('手机号格式不正确,请输入11位手机号码！');
                return
            };
            if(this.ruleForm.content == ''){
                this.$message.error('请输入内容！');
                return
            }
            var reqParams = this.ruleForm;
            contactus(reqParams).then((res)=>{
                if(res.data.code == 0){
                    this.$message.success('提交成功！')
                }else{
                    this.$message.error(res.data.msg)
                }
            })
            .catch((error)=>{
                // this.$message.error('提交失败！请重试！')
            })
        },
    },
    computed:{
        labelstyle() {
            return {
                fontSize:'14px',
                color:'#666',
                marginBottom:"30px"
            }
        }
    }
}
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "./contact.scss";
</style>
